<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <form action="#">
            <div class="form-group">
                <input type="file" id="file" name="img" class="form-control"/>
            </div>
            <div class="form-group">
                <button type="button" id="btn" class="btn btn-success">上传图片</button>
            </div>
        </form>
        <hr>
        <div class="preview"></div>
    </div>
</body>
<script>
    document.querySelector('#btn').addEventListener('click',function(){
        var file=document.querySelector('#file').files[0];
        // 收集表单数据
        var fd=new FormData();
        fd.append('img',file);
        // 1-创建实例对象
        var xhr=new XMLHttpRequest();
        // 2-设置请求行
        xhr.open('POST','../apis/index.php?c=Upload&a=img');
        // 上传文件的时候, 不能设置Content-Type
        // 3-发送请求
        xhr.send(fd);
        // 4-监听服务端的响应
        xhr.onload=function(){
            var res=JSON.parse(xhr.responseText);
            console.log(res);
            var preview=document.querySelector('.preview');
            var img='<img class="thumbnail" src="'+res.url+'">';
            preview.innerHTML=img;
        }
    });
</script>
</html>